<template>
  <div class="edu-page-warp declare-topic">
    <edu-dialog :title="$t('graduationDesign.declareSubject')" width="70%" @close="closeDialog" :visible="declareDialogVisible">
      <el-form :model="declareTopicForm" ref="declareTopicForm" label-width="170px" :rules="declareTopicRules" label-position="right" label-suffix="：" :disabled="declareTopicForm.actionType === 'VIEW'">
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('graduationDesign.subjectName')" prop="projectName">
              <el-input v-model="declareTopicForm.projectName" maxlength="100" class="topic-input-select" :placeholder="$t('graduationDesign.pleaseEnter')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('graduationDesign.subtitle')" prop="subtitleName">
              <el-input v-model="declareTopicForm.subtitleName" maxlength="100" class="topic-input-select" :placeholder="$t('graduationDesign.pleaseEnter')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('graduationDesign.subjectSource')" prop="projectSourceId">
              <el-select v-model="declareTopicForm.projectSourceId" clearable filterable :placeholder="$t('graduationDesign.pleaseChoose')" class="topic-input-select">
                <el-option v-for="item in source.subjectSourceOptions" :key="item.value" :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('graduationDesign.subjectNature')" prop="projectNatureId">
              <el-select v-model="declareTopicForm.projectNatureId" clearable filterable :placeholder="$t('graduationDesign.pleaseChoose')" class="topic-input-select">
                <el-option v-for="item in source.subjectNatureOptions" :key="item.value" :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('graduationDesign.subjectType')" prop="projectType">
              <el-select v-model="declareTopicForm.projectType" clearable filterable :placeholder="$t('graduationDesign.pleaseChoose')" class="topic-input-select">
                <el-option v-for="item in source.subjectTypeOptions" :key="item.value" :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('graduationDesign.graduationDesignLocation')" prop="designPlace">
              <el-input v-model="declareTopicForm.designPlace" :placeholder="$t('graduationDesign.pleaseEnter')" maxlength="60" class="topic-input-select"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('graduationDesign.socialPractice')" prop="practiceSocialId">
              <el-select v-model="declareTopicForm.practiceSocialId" clearable filterable :placeholder="$t('graduationDesign.pleaseChoose')" class="topic-input-select">
                <el-option v-for="item in source.socialPracticeOptions" :key="item.value" :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item :label="$t('graduationDesign.researchDirection')" prop="researchDirection">
              <el-input v-model="declareTopicForm.researchDirection" type="textarea" :rows="4" maxlength="200" show-word-limit :placeholder="$t('graduationDesign.pleaseEnter')" class="topic-input-select"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item :label="$t('graduationDesign.subjectIntroduction')" prop="introductionProject">
              <el-input v-model="declareTopicForm.introductionProject" type="textarea" :rows="4" maxlength="200" show-word-limit :placeholder="$t('graduationDesign.pleaseEnter')" class="topic-input-select"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item :label="$t('graduationDesign.instructor')" prop="teacherNum">
              <el-select v-model="declareTopicForm.teacherNum" clearable filterable :placeholder="$t('graduationDesign.pleaseChoose')" class="topic-input-select">
                <el-option v-for="item in source.innerTutorOptions" :key="item.value" :value="item.value" :label="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="buttons">
        <el-button @click="closeDialog">{{$t('graduationDesign.cancel')}}</el-button>
        <el-button type="primary" @click="onSave" v-if="declareTopicForm.actionType !== 'VIEW'">{{$t('graduationDesign.save')}}</el-button>
        <el-button type="primary" @click="onSubmit" v-if="declareTopicForm.actionType !== 'VIEW'">{{$t('graduationDesign.submit')}}</el-button>
      </div>
    </edu-dialog>
  </div>
</template>
<script>
import API from "common/src/api/underGraduationDesign/stuDeclareSubject";

export default {
  name: 'declareTopicDialog',
  props: {
    declareDialogVisible: {
      type: Boolean,
      default: false
    },
    declareTopicForm: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      api: API,
      source: {
        subjectSourceOptions: [], // 课题来源
        subjectNatureOptions: [], // 课题性质
        subjectTypeOptions: [{ // 课题类别
          label: "毕业论文",
          value: "毕业论文",
        }, {
          label: "毕业设计",
          value: "毕业设计",
        }],
        socialPracticeOptions: [], //其中社会时间情况
        innerTutorOptions: []
      },
      declareTopicRules: {
        projectName: [
          { required: true, message: this.$t('graduationDesign.pleaseEnter'), trigger: 'blur' }
        ],
        projectSourceId: [
          { required: true, message: this.$t('graduationDesign.pleaseChoose'), trigger: 'change' }
        ],
        projectNatureId: [
          { required: true, message: this.$t('graduationDesign.pleaseChoose'), trigger: 'change' }
        ],
        projectType: [
          { required: true, message: this.$t('graduationDesign.pleaseChoose'), trigger: 'change' }
        ],
        designPlace: [
          { required: true, message: this.$t('graduationDesign.pleaseEnter'), trigger: 'blur' }
        ],
        practiceSocialId: [
          { required: true, message: this.$t('graduationDesign.pleaseChoose'), trigger: 'change' }
        ],
        researchDirection: [
          { required: true, message: this.$t('graduationDesign.pleaseEnter'), trigger: 'blur' }
        ],
        teacherNum: [
          { required: true, message: this.$t('graduationDesign.pleaseChoose'), trigger: 'change' }
        ]
      }
    };
  },
  created() {
    this.getInnerTutorInfo();
    this.getSubjectSource();
    this.getSubjectNature();
    this.getSocialPractice();
  },
  mounted() { },
  methods: {
    // 查校内导师
    getInnerTutorInfo() {
      this.api.getInnerTutor().then(res => {
        this.source.innerTutorOptions = this.optionFormat(res.data, "name", "code");
      }).catch();
    },
    // 查课题来源
    getSubjectSource() {
      const params = {
        year: this.declareTopicForm.grade
      };
      this.api.getSource(params).then(res => {
        this.source.subjectSourceOptions = this.optionFormat(res.data, "subjectSource", "id");
      }).catch();
    },
    // 查课题性质
    getSubjectNature() {
      const params = {
        year: this.declareTopicForm.grade
      };
      this.api.getNature(params).then(res => {
        this.source.subjectNatureOptions = this.optionFormat(res.data, "subjectProperties", "id");
      }).catch();
    },
    // 查社会实践
    getSocialPractice() {
      const params = {
        year: this.declareTopicForm.grade
      };
      this.api.getPractice(params).then(res => {
        this.source.socialPracticeOptions = this.optionFormat(res.data, "sociaPractice", "id");
      }).catch();
    },
    // 下拉框选项数据 格式化
    optionFormat(optionList = [], label = "", value = "") {
      const dataset = [];
      for (let i = 0; i < optionList.length; i++) {
        const optionObj = {
          label: optionList[i][label],
          value: optionList[i][value]
        };
        dataset.push(optionObj);
      }
      return dataset;
    },
    onSave() {
      this.$emit("declare-save", this.declareTopicForm);
    },
    onSubmit() {
      this.$emit("declare-submit", this.declareTopicForm);
    },
    closeDialog() {
      this.$emit("declare-close");
    }
  }
}
</script>
<style lang="scss" scoped>
.declare-topic {
    .topic-input-select {
        width: 100%;
    }
}
</style>
